import { Example } from '@/components/Example';
import { CustomizationTheme } from './CustomizationTheme';
import { Alert } from '@aws-amplify/ui-react';

## Theming

### CSS styles

You can customize FaceLivenessDetector's default style by using [CSS variables](../../theming/css-variables).

The example below uses a `<style>` tag to change the default colors to a dark theme:

```css
[data-amplify-theme] {
  --amplify-colors-background-primary: var(--amplify-colors-neutral-90);
  --amplify-colors-background-secondary: var(--amplify-colors-neutral-100);
  --amplify-colors-brand-primary-10: var(--amplify-colors-teal-100);
  --amplify-colors-brand-primary-80: var(--amplify-colors-teal-40);
  --amplify-colors-brand-primary-90: var(--amplify-colors-teal-20);
  --amplify-colors-brand-primary-100: var(--amplify-colors-teal-10);
}
```

### Theme Provider Theme

You can update the style of `FaceLivenessDetector` by using the [ThemeProvider](/react/theming) [theme object](/react/theming#theme-object). To do this, you must surround `FaceLivenessDetector` in the `ThemeProvider`.

Then create a [theme object](/react/theming#theme-object), with all your font and color updates. Feel free to use [design tokens](/react/theming#design-tokens), as a way of designing your theme further.

Below is an example of changing the default colors to a dark theme. You can also access the default dark mode override for the Amplify Theme Provider [here](/react/theming/dark-mode#default-dark-mode).

```tsx file=./CustomizationTheme.tsx
```

<Alert role="none" variation="warning">The following example only demonstrates the ability to customize the component's theme; the Face Liveness check is not intended to work.</Alert>

<Example>
  <CustomizationTheme />
</Example>